import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
import DataSet from "@antv/data-set";

class LineCharts extends React.Component {
  render() {
    const { data } = this.props;
    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.source(data).transform({
      type: "sort",

      callback(a, b) {
        // 排序依据，和原生js的排序callback一致
        return a.y - b.y > 0;
      }
    });
    return (
      <div>
        <Chart width={window.innerWidth-30}  height={280}  padding={[20, 'auto', 40, 'auto']} data={dv} forceFit>
          <Coord transpose />
          <Axis
            name="x"
            label={{
              offset: 12
            }}
          />
          <Axis name="y" />
          <Tooltip />
          <Geom type="interval" position="x*y" />
        </Chart>
      </div>
    );
  }
}

export default LineCharts;
